---
title: Tina CMS & Astro
description: Tina를 CMS로 사용하여 Astro 프로젝트에 콘텐츠 추가
type: cms
stub: false
service: Tina CMS
i18nReady: true
---

import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'
import Grid from '~/components/FluidGrid.astro'
import Card from '~/components/ShowcaseCard.astro'

[Tina CMS](https://tina.io/)는 Git 지원 헤드리스 콘텐츠 관리 시스템입니다.

## Astro와 통합

시작하려면 기존 Astro 프로젝트가 필요합니다.

1. 다음 명령을 실행하여 Astro 프로젝트에 Tina를 설치합니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npx @tinacms/cli@latest init
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm dlx @tinacms/cli@latest init
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn dlx @tinacms/cli@latest init
      ```
      </Fragment>
    </PackageManagerTabs>

    - 클라우드 ID를 묻는 메시지가 나타나면 <kbd>Enter</kbd>를 눌러 건너뜁니다. Tina Cloud를 사용하려는 경우 나중에 생성하게 됩니다.
    - "What framework are you using" 라는 메시지가 표시되면 **Other**를 선택합니다.
    - 공개 자산이 어디에 저장되어 있는지 묻는 메시지가 나타나면 <kbd>Enter</kbd>를 누르세요.

    이 작업이 완료되면 이제 프로젝트 루트에 `.tina` 폴더를 얻게되고 `content/posts`에 생성된 `hello-world.md` 파일이 있어야 합니다.

2. `package.json` 파일에서 `dev` 스크립트를 변경합니다.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```json del={4} ins={5}
      // package.json
      {
          "scripts": {
              "dev": "astro dev",
              "dev": "tinacms dev -c \"astro dev\""
          }
      }
      ```
      </Fragment>
    </PackageManagerTabs>

3. 이제 TinaCMS가 로컬 모드로 설정되었습니다. `dev` 스크립트를 실행한 다음 `/admin/index.html#/collections/post`로 이동하여 이를 테스트하세요.

    "Hello, World!" 게시물을 편집하면 프로젝트 디렉터리의 `content/posts/hello-world.md` 파일을 업데이트합니다.

4. `.tina/config.ts` 파일에서 `schema.collections` 속성을 편집하여 Tina 컬렉션을 설정하세요.

    예를 들어, 필수 "date posted" 프런트매터 속성을 게시물에 추가할 수 있습니다.

    ```js title=".tina/config.ts" ins={35-40}
    import { defineConfig } from "tinacms";

    // 호스팅 제공업체는 이를 환경 변수로 노출할 가능성이 높습니다.
    const branch = process.env.HEAD || process.env.VERCEL_GIT_COMMIT_REF || "main";

    export default defineConfig({
      branch,
      clientId: null, // tina.io에서 가져오기
      token: null, // tina.io에서 가져오기
      build: {
        outputFolder: "admin",
        publicFolder: "public",
      },
      media: {
        tina: {
          mediaRoot: "images",
          publicFolder: "public",
        },
      },
      schema: {
        collections: [
          {
            name: "posts",
            label: "Posts",
            path: "src/content/posts",
            format: 'mdx',
            fields: [
              {
                type: "string",
                name: "title",
                label: "Title",
                isTitle: true,
                required: true,
              },
              {
                type: "datetime",
                name: "posted",
                label: "Date Posted",
                required: true,
              },
              {
                type: "rich-text",
                name: "body",
                label: "Body",
                isBody: true,
              },
            ],
          },
        ],
      },
    });
    ```

    [Tina 문서](https://tina.io/docs/reference/collections/)에서 Tina 컬렉션에 대해 자세히 알아보세요.

5. 프로덕션 환경에서 TinaCMS는 변경 사항을 GitHub 저장소에 직접 커밋할 수 있습니다. 프로덕션을 위해 TinaCMS를 설정하려면 [Tina Cloud](https://tina.io/docs/tina-cloud/)를 사용하거나 [Tina Data Layer](https://tina.io/docs/self-hosted/overview/)를 자체 호스팅하도록 선택할 수 있습니다. Tina Docs에서 [Tina Cloud 등록에 대해 자세히 알아볼 수 있습니다](https://app.tina.io/register).

## 공식 자료

- [TinaCMS Astro 통합 안내서](https://tina.io/docs/frameworks/astro/).

## 커뮤니티 자료

- [시각적 편집 기능을 갖춘 Astro Tina 스타터](https://github.com/dawaltconley/tina-astro) - Jeff See + Dylan Awalt-Conley
- [기본 편집 기능이 포함된 Astro Tina 스타터](https://github.com/tombennet/astro-tina-starter/tree/main) - Tom Bennet
- [Astro의 이미지 최적화를 Tina와 함께 사용하기](https://joschua.io/posts/2023/08/16/how-to-use-astro-assets-with-tina-cms/)

## 테마

<Grid>
  <Card title="Resume01" href="https://astro.build/themes/details/resume-01/" thumbnail="resume01.png"/>
</Grid>